<template>
  <div class="rate-item component-item" :style="{paddingLeft: data.config.labelWidth}">
    <label
      class="component-label"
      :style="{width: data.config.labelWidth}"
    >{{data.config.labelName}}</label>
    <Rate
      :value="view ? value : data.value"
      :count="data.config.count"
      :disabled="data.config.disabled"
      :readonly="pageType==='result' ? true : false"
      :showText="data.config.showText"
      :allowHalf="data.config.allowHalf"
      :clearable="data.config.clearable"
      :character="data.config.character"
      :customIcon="data.config.customicon"
      @on-change="changeValue"
    />
  </div>
</template>

<script>
export default {
  props: ['data', 'index', 'file', 'view', 'pageType'],
  data () {
    return {
      value: 5
    };
  },
  watch: {
    'file.result': {
      handler () {
        this.dataHandle();
      }
    }
  },
  methods: {
    // 数据处理
    dataHandle () {
      if (this.file) {
        let { key, saveResult } = this.data;
        let { isDefaultData, result } = this.file
        // 值的获取
        if (!isDefaultData && saveResult) {
          this.value = result[key]
          this.changeValue(this.value)
        }
      }
    },

    changeValue (value) {
      this.$emit('updateResult', {
        value,
        index: this.index
      });
    }
  },
  created () {
    this.dataHandle();
  }
};
</script>

<style lang="less" scoped>
.component-item {
  position: relative;
  label.component-label {
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 32px;
  }
}
</style>
